<script>
import { api } from '@/api';
import { List, Tab, Tabs } from 'vant';

export default {
  components: {
    List,
    Tab,
    Tabs
},
  computed: {
  },
  data() {
    return {
      page: 0,
      list: [],
      loading: false,
      finished: false,
      withdrawList: [],
      withdrawLoading: false,
      withdrawFinished: false
    }
  },
  methods: {
    async handleLoad() {
      const { data } = await api.wallet.bill()
      this.loading = false
      this.finished = true
      this.list.push(...data)
    },
    async handleWithdrawLoad() {
      const { data, count } = await api.wallet.withdrawList(this.page++)
      this.withdrawLoading = false

      if (!Array.isArray(data) || !data.length) {
        this.withdrawFinished = true
        return
      }
      this.withdrawList.push(...data)
      this.withdrawFinished = this.withdrawList.length >= count
    }
  },
}
</script>

<template>
  <div class="wallet-detail">
    <Tabs>
      <Tab title="支出">
        <List v-model="loading" :finished="finished" finished-text="没有更多了" @load="handleLoad" >
          <div
            v-for="(item, index) in list"
            :key="index"
            class="wallet-detail-item"
          >
            <div>支出</div>
            <div>-¥{{ item.price }}</div>
          </div>
        </List>
      </Tab>

      <Tab title="提现">
        <List v-model="withdrawLoading" :finished="withdrawFinished" finished-text="没有更多了" @load="handleWithdrawLoad" >
          <div
            v-for="(item, index) in withdrawList"
            :key="index"
            class="wallet-detail-item"
          >
            <div v-if="item.status === 0">待提现</div>
            <div v-else-if="item.status === 1">已提现</div>
            <div>-¥{{ item.price }}</div>
          </div>
        </List>
      </Tab>
    </Tabs>
  </div>
</template>

<style lang="less" scoped>
.wallet-detail {
  .wallet-detail-item {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    &:not(:last-child) {
      border-bottom: 1px solid #f2f2f2;
    }
  }
}
</style>
